<template>
    <div class="title-content" v-bind:class="[getClass]">
        <a v-for="(item, i) in list" class="content-item hover" v-bind:class="{active: index === i}" v-on:click="change(i)" v-bind:title="item.name" v-on:contextmenu.prevent="modify(i)"><span class="posa" v-text="item.name"></span></a>
    </div>
</template>

<script>
  import {Observer} from '../../core/util'

    const fontstylelist = [
        {
            name: $.i18n('toolbar_fontstyle_mainbody'),
            param: {
                tagName: "p"
                //style: "font-size: 29px; font-style: normal; font-family: 'Microsoft YaHei UI', 'Microsoft YaHei', 微软雅黑, SimSun, 宋体, sans-serif; font-weight: bold; text-decoration: none; color: #000000;"
            },
            value: 'p',
        },
        {
            name: $.i18n('toolbar_fontstyle_headline1'),
            param: {
                tagName: "h1"
            },
            value: 'h1',
        },
        {
            name: $.i18n('toolbar_fontstyle_headline2'),
            param: {
                tagName: "h2"
            },
            value: 'h2',
        },
        {
            name: $.i18n('toolbar_fontstyle_headline3'),
            param: {
                tagName: "h3"
            },
            value: 'h3',
        },
        {
            name: $.i18n('toolbar_fontstyle_headline4'),
            param: {
                tagName: "h4"
            },
            value: 'h4',
        },
        {
            name: $.i18n('toolbar_fontstyle_headline5'),
            param: {
                tagName: "h5"
            },
            value: 'h5',
        },
        {
            name: $.i18n('toolbar_fontstyle_headline6'),
            param: {
                tagName: "h6"
            },
            value: 'h6',
        }
    ];

  // 段落组件
  export default {
    created: function () {
        var self = this;
        Observer.register('hidecloth', function () {
            self.show = false;
        });
        Observer.register('showfontstylelist', function () {
            self.show = true;
            var value = self.editor.queryCommandValue('fontstyle');
            for (var i = 0, len = self.list.length; i < len; i++) {
                if (self.list[i].value === value) break;
            }
            self.index = i === len ? -1 : i;
        });
        function editorCompleted(editor) {
            Observer.remove('editorCompleted', editorCompleted);
            self.editor = editor;
        }
        Observer.register('editorCompleted', editorCompleted);
    },
    data: function(){
        return {
            show: false,
            index: -1,
            list: fontstylelist
        }
    },
    computed: {
        getClass: function () {
            return this.show ? '' : 'hide';
        }
    },
    methods: {
        change: function (i) {
            this.show = false;
            Observer.fire('execCommand', ['fontstyle', this.list[i].param]);
            Observer.fire('hidecloth');
        },
        modify: function (i) {
            
        }
    }
  }

  export {fontstylelist}
</script>